﻿@using HouseHoldBudget.App_GlobalResources
@using HouseHoldBudget.Models.Budgets
@using HouseHoldBudget.Models.Expenses
@using Kendo.Mvc.UI
@model HouseHoldBudget.Models.Budgets.BudgetResultModel
@Html.ValidationSummary(false)
@{
    ViewBag.Title = @CustomResources.Budget_BudgetSummary;
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using (Html.BeginForm("ShowBudget", "Budget", FormMethod.Post))
{
    @Html.HiddenFor(model => model.Id)
    <div class="section-header">
        <div class="title">
            <img src="@Url.Content("~/Content/images/budget.png")" alt="" />
            @CustomResources.Budget_BudgetSummary @Html.ActionLink("(" + @CustomResources.Common_BackToList + ")", "ShowAllBudgets")
        </div>
    </div>

    @Html.Kendo().TabStrip().Name("budget-tab").Animation(false).Items(x =>
    {
        x.Add().Text("Résumé").Content(TabSummary().ToHtmlString()).Selected(true);
        x.Add().Text("Dépenses").Content(TabExpenses().ToHtmlString());
        x.Add().Text("Dépenses par catégories").Content(TabExpensesByCategory().ToHtmlString());
    })
}
@helper TabSummary()
    {
    <div>
        <table class="content">
            <tr>
                <td class="adminTitle">
                    @Html.LabelFor(model => model.BudgetName):
                </td>
                <td class="adminData">
                    @Html.DisplayFor(model => model.BudgetName)
                </td>
            </tr>
            <tr>
                <td class="adminTitle">
                    @Html.LabelFor(model => model.BudgetOwner.UserFullName):
                </td>
                <td class="adminData">
                    @Html.DisplayFor(model => model.BudgetOwner.UserFullName)
                </td>
            </tr>
            <tr>
                <td class="adminTitle">
                    @Html.LabelFor(model => model.MonthPeriodItems):
                </td>
                <td class="adminData">
                    @if (Model.MonthPeriodEnabled)
                    {
                        @Html.DropDownListFor(model => model.MonthPeriod, Model.MonthPeriodItems)
                    }
                    @Html.DropDownListFor(model => model.AnnualPeriod, Model.AnnualPeriodItems)
                    <input type="submit" class="k-link" type="submit" value="Afficher" name="show-budget-period" />
                </td>
            </tr>
        </table>
    </div>
    <br />
    <div>
        <table class="content">
            <tr>
                <td class="adminTitle">
                    @Html.LabelFor(model => model.TotalIncomes):
                </td>
                <td class="adminData">
                    @Html.DisplayFor(model => model.TotalIncomes)
                </td>
            </tr>
            <tr>
                <td class="adminTitle">
                    @Html.LabelFor(model => model.TotalExpenses):
                </td>
                <td class="adminData">
                    @Html.DisplayFor(model => model.TotalExpenses)
                </td>
            </tr>
            <tr>
                <td class="adminTitle">
                    @Html.LabelFor(model => model.TotalOutstanding):
                </td>
                <td class="adminData">
                    @Html.DisplayFor(model => model.TotalOutstanding)
                </td>
            </tr>
        </table>
    </div>
    <br />
    <table class="content">
        <tr>
            <td class="adminCategoryTitle" colspan="1">
                Synthèse des dépenses
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.DisplayFor(model => model.BudgetOwner.UserFullName):
            </td>
            <td class="adminData">
                @Html.DisplayFor(model => model.BudgetOwner.TotalExpenseAmount)
            </td>
        </tr>
        @foreach (var actor in Model.BudgetActors)
        {
            <tr>
                <td class="adminTitle">
                    @actor.UserFullName:
                </td>
                <td class="adminData">
                    @actor.TotalExpenseAmount.ToString("C")
                </td>
            </tr>
        }
    </table>
    <br />
    <table class="content">
        <tr>
            <td class="adminCategoryTitle" colspan="1">
                Synthèse des revenus
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.DisplayFor(model => model.BudgetOwner.UserFullName):
            </td>
            <td class="adminData">
                @Html.DisplayFor(model => model.BudgetOwner.TotalIncomesAmount)
            </td>
        </tr>
        @foreach (var actor in Model.BudgetActors)
        {
            <tr>
                <td class="adminTitle">
                    @actor.UserFullName:
                </td>
                <td class="adminData">
                    @actor.TotalIncomesAmount.ToString("C")
                </td>
            </tr>
        }
    </table>
}
@helper TabExpenses()
    {
    @(Html.Kendo().Grid<ExpenseModel>()
                    .Name("grid-budget-expenses")
                    .Columns(columns =>
                    {
                        columns.Bound(b => b.UserFullName).Title(@CustomResources.Common_Users);
                        columns.Bound(b => b.ExpenseType).Title(@CustomResources.Common_ExpensesTypes).ClientTemplate("#=ExpenseType.ExpenseTypeName#");
                        columns.Bound(b => b.ExpenseLabel).Title(@CustomResources.Common_Label);
                        columns.Bound(b => b.ExpenseOn).Title(@CustomResources.Common_Date);
                        columns.Bound(b => b.ExpenseAmount).Title(@CustomResources.Common_Amount).Format("{0:C}")
                            .ClientFooterTemplate("Total: #= kendo.toString(sum, 'C') #")
                            .ClientGroupFooterTemplate("Total: #= kendo.toString(sum, 'C') #");
                    })
                    .DataSource(dataBinding => dataBinding.Ajax()
                                                .Model(model =>
                                                {
                                                    model.Id(p => p.Id);
                                                })
                                                        .Read(read => read.Action("SelectAllBudgetExpenses", "Budget", new { budgetId = Model.Id, month = Model.MonthPeriod, year = Model.AnnualPeriod }))
                                                        .Aggregates(agg => agg.Add(o => o.ExpenseAmount).Sum())
                                                        .PageSize(20))
                    .Scrollable()
                    .Sortable()
                    .Filterable())        
}
@helper TabExpensesByCategory()
    {
    <table id="categoryExpenseContent" class="content">
        <tr>
            <td style="width: 50%;">
                @(Html.Kendo().Chart<CategoryExpenseModel>()
              .Name("chart")
              .DataSource(dataBinding => dataBinding
                          .Read(read => read.Action("SelectAllBudgetExpensesForChart", "Budget", new { budgetId = Model.Id, month = Model.MonthPeriod, year = Model.AnnualPeriod })))
              .Series(series =>
              {
                  series.Column(s => s.CategoryExpenseAppointedAmount).Name("Dépenses prévus");
                  series.Column(s => s.CategoryExpenseAmount).Name("Dépenses courantes");
              })
              .CategoryAxis(axis => axis
                          .Categories(s => s.CategoryName)
              )
              .ValueAxis(axis => axis
                  .Numeric().Labels(labels => labels.Format("{0:#,##0} €"))
                  .MajorGridLines(majorGridLines => majorGridLines.Visible(false))
                          .PlotBands(plotBands =>
                          {
                              plotBands.Add().Color("#cccccc").From(0).To(12000).Opacity(0.3);
                          })
              )
              .Tooltip(tooltip => tooltip
                .Visible(true)
                .Format("{0:#,##0} €"))
              .HtmlAttributes(new { style = "width:800px; height: 500px; margin: auto;" }))
            </td>
            <td style="width: 50%;">
                    @(Html.Kendo().Grid<CategoryExpenseModel>()
                    .Name("grid-budget-categoryexpenses")
                    .Columns(columns =>
                    {
                        columns.Bound(b => b.CategoryName).Title("Catégorie");
                        columns.Bound(b => b.CategoryExpenseAppointedAmount).Title("Dépenses prévus");
                        columns.Bound(b => b.CategoryExpenseAmount).Title("Dépenses courantes");
                        columns.Bound(b => b.CategoryExpenseStayAmount).Title("Reste");
                    })
                    .DataSource(dataBinding => dataBinding.Ajax()
                                                                .Read(read => read.Action("SelectAllBudgetExpensesForGrid", "Budget", new { budgetId = Model.Id, month = Model.MonthPeriod, year = Model.AnnualPeriod }))
                                                        .PageSize(20))
                    .Scrollable()
                    .Sortable()
                            .HtmlAttributes(new { style = "width:700px; margin: auto;" })
                                    .Events(e => e.DataBound("grid_budget_categoryexpenses_OnRowDatabound"))        
                    .Filterable())  
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        function grid_budget_categoryexpenses_OnRowDatabound(e) {
            var grid = $("#grid-budget-categoryexpenses").data("kendoGrid");
            var data = grid.dataSource.data();
            $.each(data, function (i, row) {
                if (row.CategoryExpenseAppointedAmount < row.CategoryExpenseAmount) {
                    $('tr[data-uid="' + row.uid + '"]').css("color", "red");
                }
            });
        }
</script>
}
